<template>
    <div>
        <el-drawer :model-value="visible" title="项目款结算" size="500px" @close="closeHandle" @closed="closed">
            <div>
                <el-form :model="form" ref="formRef" :rules="formRules" label-width="120px">
                    <!-- <el-form-item label="款项名称" required prop="xiangmupricelog_id" :label-width="formLabelWidth">
                        <el-select v-model="form.xiangmupricelog_id" filterable default-first-option
                            :reserve-keyword="false" placeholder="请选择款项名称">
                            <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="结款金额" required :label-width="formLabelWidth" prop="price">
                        <el-input v-model="form.price" />
                    </el-form-item>
                    <el-form-item label="结款日期" prop="date" required :label-width="formLabelWidth">
                        <el-date-picker v-model="form.date" type="date" placeholder="请选择日期" :size="size" />
                    </el-form-item>
                    <el-form-item label="结款账户" required :label-width="formLabelWidth" prop="jiekuanzhanghu_id">
                        <el-select v-model="form.jiekuanzhanghu_id" filterable default-first-option :reserve-keyword="false"
                            placeholder="请选择结款账户">
                            <el-option v-for="item in settlementDataList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" prop="content" :label-width="formLabelWidth">
                        <el-input placeholder="请输入备注" v-model="form.content" show-word-limit rows="4" type="textarea"
                            autocomplete="off" />
                    </el-form-item>
                    <!-- 上传多张图片 和文件 -->
                    <el-form-item label="上传图片" :label-width="formLabelWidth">
                        <el-upload v-model:file-list="fileList2" class="upload-demo" :headers="headerObj" :limit='1'
                            :on-preview="handlePreview" :on-remove="handleRemove" action="/api/common/upload"
                            :on-success="successUpdata" list-type="picture">
                            <el-button type="primary">点击上传图片</el-button>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <el-space>
                    <el-button type="info" plain :loading="loading" @click="cancelHandle">取消</el-button>
                    <el-button type="primary" :loading="loading" @click="confirmHandle">提交保存</el-button>
                </el-space>
            </template>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref, computed, reactive, watch } from "vue";
import { getBusinessId, settlementList } from "@/api/business";
import { addjiekuan } from '@/api/supplier.js'
import store from '@/store'
import { toast } from "@/hook/toast";
import { delay } from "@/utils";

const form = reactive({
    xiangmu_id: '',
    xiangmupricelog_id: '',
    price: '',
    date: '',
    jiekuanzhanghu_id: '',
    content: '',
    images: '',
    jiekuanlog_id: ''
})
const formRef = ref(null)
const size = ref("default");
const formLabelWidth = '80px'
const loading = ref(false);
// token 
const headerObj = ref({})
const { token } = store.getters
headerObj.value.token = token;
const fileList2 = ref([])
const array = ref([])
const formRules = computed(() => ({
    xiangmupricelog_id: [
        {
            required: true,
            message: '请选择款项',
            trigger: 'change',
        }
    ],
    price: [
        {
            required: true,
            message: '请输入金额',
            trigger: 'change',
        }
    ],
    date: [
        {
            required: true,
            message: '请选择日期',
            trigger: 'change',
        }
    ],
    jiekuanzhanghu_id: [
        {
            required: true,
            message: '请选择结款账户',
            trigger: 'blur'
        }
    ]

}))

function handlePreview(w) {
    console.log(w, '23')
}

// 上传图片
function successUpdata(e) {
    array.value.push(e.data.fullurl)
    form.images = array.value
}

// 删除图片
function handleRemove(file) {
    form.images = ''
}

// 关闭弹框
function closed() {
    resetForm()
}
// 取消
function cancelHandle() {
    visible.value = false
    resetForm()
}
const closeHandle = () => {
    visible.value = false
};

// 获取项目款项结算阶段
const userList = ref([])
async function initUserList() {
    const resp = await getBusinessId()
    const { code, data, msg } = resp
    if (code !== 1) return
    if (!!data && data.length) {
        userList.value = data.map(item => {
            const { id, name } = item
            return { value: id, label: name }
        })
    }
}
// 获取的款项账户
const settlementDataList = ref([])
async function gteSettlementList() {
    const resp = await settlementList()
    const { code, data, msg } = resp
    console.log('ress', resp)
    if (code !== 1) return



    if (!!data.data && data.data.length) {
        settlementDataList.value = data.data.map(item => {

            const { id, name } = item
            return { value: id, label: name }
        })
    }

}

function editHandle(row, e) {
    console.log(row, e, '获取的信息2')
    const {
        price,
        content,
        xiangmu_id,
        xiangmupricelog_id,
        jiekuanzhanghu_id,
        date,
        id,
        images,
        jieduan_id
    } = row
    form.price = price || ''
    form.content = content || ''
    form.xiangmu_id = xiangmu_id || ''
    form.xiangmupricelog_id = xiangmupricelog_id || e
    form.jiekuanzhanghu_id = jiekuanzhanghu_id || ''
    form.date = date || ''
    form.jiekuanlog_id = id || ''

    console.log(images, '数据')
    form.images = images || ''


    visible.value = true
    if (!isNaN(row)) {
        form.xiangmu_id = row
    }
    if (images) {
        fileList2.value = [{
            name: '1.png',
            url: images
        }]
    }
}
const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true,
    }
})
const emits = defineEmits(['update:modelValue', 'addSuccess'])
const visible = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        emits('update:modelValue', value)
    }
})

watch(() => props.modelValue, value => {
    if (!value) {
        return
    }
    // initUserList()
    gteSettlementList()
})

defineExpose({
    editHandle,
})


// 清空数据
function resetForm() {
    console.log('执行到这么')
    form.xiangmu_id = ''
    form.price = ''
    form.date = ''
    form.jiekuanzhanghu_id = ''
    form.content = ''
    form.images = ''
    form.jiekuanlog_id = ''
    form.xiangmupricelog_id = ''
    fileList2.value = []
    formRef.value.resetFields()
}

// 提交保存
function confirmHandle() {
    formRef.value.validate(async flag => {
        if (!flag) return
        loading.value = true
        const { xiangmu_id, xiangmupricelog_id, price, date, jiekuanzhanghu_id, content, images, jiekuanlog_id } = form
        const payload = {
            xiangmu_id, xiangmupricelog_id, price, date, jiekuanzhanghu_id, content, jiekuanlog_id,
        }
        payload.images = images.toString()

        console.log(payload)
        loading.value = false
        const resp = await addjiekuan(payload)
        form.isEdit = false
        const { code, msg } = resp
        await delay(200)
        toast({ title: msg })
        loading.value = false
        if (code !== 1) return
        triggerUpdate()
    })
}
function triggerUpdate() {
    emits('addSuccess')
    resetForm()
    visible.value = false
}

</script>

<style></style>